<!--
 * @Author: cl
 * @Description: nestjs测试数据
 * @Date: 2023-04-12 14:49:10
 * @LastEditTime: 2023-05-10 09:50:42
 * @FilePath: \vue3\src\views\nestjs\student\index.vue
 * @LastEditors: cl
-->

<template>
  <div class="wraps">
    <div>
      <el-input v-model="search.keyWord" style="width: 300px"></el-input>
      <el-button @click="init" style="margin-left: 10px">搜索</el-button>
      <el-button @click="openDialog" type="primary" style="margin-left: 10px"
        >添加</el-button
      >
      <Count :list="tableData"></Count>
    </div>
    <el-table
      border
      :data="tableData"
      style="width: 100%; margin-top: 30px"
      v-loading="isloading"
    >
      <el-table-column prop="id" label="id" width="150" />
      <el-table-column prop="no" label="编号" width="150" />
      <el-table-column prop="name" label="名字" width="150" />
      <el-table-column prop="birth" label="生日" width="150" />
      <el-table-column prop="sex" label="性别" width="150" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column width="400">
        <template #default="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button @click="deleteRow(scope.row)">删除</el-button>
          <el-button @click="editDetail(scope.row)">查看信息</el-button>
          <el-button @click="lookScoreRow(scope.row)">查成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="新增学生" draggable>
      <el-form :model="form">
        <el-form-item prop="no" label="编号">
          <el-input v-model="form.no" placeholder="编号" />
        </el-form-item>
        <el-form-item prop="name" label="名称">
          <el-input v-model="form.name" placeholder="名称" />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select
            v-model="form.sex"
            class="m-2"
            placeholder="请选择性别"
            size="large"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="birth" label="生日">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="请选择生日"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <el-input v-model="form.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">关闭</el-button>
          <el-button type="primary" @click="save"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="userInfodialogVisible" title="弹框" draggable>
      <el-form :model="useInfoForm">
        <el-form-item prop="no" label="编号">
          <el-input v-model="useInfoForm.no" placeholder="编号" disabled />
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input
            v-model="useInfoForm.name"
            placeholder="请输入姓名"
            disabled
          />
        </el-form-item>
        <el-form-item prop="url" label="图片">
          <el-input
            v-model="useInfoForm.stuInfo.url"
            placeholder="请输入图片"
          />
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input
            v-model="useInfoForm.stuInfo.address"
            placeholder="请输入地址"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeUserInfo">关闭</el-button>
          <el-button type="primary" @click="saveUserInfo"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  addStudent,
  updateStudent,
  delStudent,
  getList,
  updateStuInfo,
  addStuInfo,
} from "@/api/moudules/student.ts";
import { ElMessage, ElMessageBox } from "element-plus";
import Count from "./components/count.vue";

const confirm: MethodDecorator = (
  target,
  propertyKey,
  descriptor: PropertyDescriptor
) => {
  const method = descriptor.value;
  descriptor.value = () => {
    ElMessageBox.confirm(
      "proxy will permanently delete the file. Continue?",
      "Warning",
      {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      }
    )
      .then(() => {
        ElMessage({
          type: "success",
          message: "Delete completed",
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "Delete canceled",
        });
      });
  };
};

// export function confirm(
//   message = '确定要删除数据，此操作不可回退。',
//   title = '提示',
//   cancelFn = function() {}
// ) {
//   return function(target, name, descriptor) {
//     const originFn = descriptor.value
//     descriptor.value = async function(...rest) {
//       try {
//         await Dialog.confirm({
//           message,
//           title: title
//         })
//         originFn.apply(this, rest)
//       } catch (error) {
//         cancelFn && cancelFn(error)
//       }
//     }
//   }
// }

const router = useRouter();
const isloading = ref(true);
const options = ref([
  {
    value: "男",
    label: "男",
  },
  {
    value: "女",
    label: "女",
  },
]);
const total = ref<number>(0);
//搜索框
const search = reactive({
  keyWord: "",
  page: 1,
  pageSize: 10,
});
//表单
const form = reactive({
  name: "",
  no: "",
  id: "",
  sex: "",
  birth: "",
  remark: "",
});
//清空数据
const resetForm = reactive({ ...form });
//表格数据
const tableData = ref([]);
//弹框开关
const dialogVisible = ref<boolean>(false);
const openDialog = () => {
  dialogVisible.value = true;
  Object.assign(form, resetForm);
};
//初始化表格数据
const init = async () => {
  let list: Object[] = [];
  await getList(search).then((res: Object[]) => {
    isloading.value = false;
    list = res;
  });
  tableData.value = list?.data ?? [];
  total.value = list?.total ?? 0;
};
init();
const changeSize = (page) => {
  search.page = page;
  init();
};
//保存 和修改 表格数据
const save = async () => {
  if (form.id) {
    await updateStudent(form);
  } else {
    await addStudent(form);
  }

  close();
  init();
};
//删除表格数据
const deleteRow = async (row: any) => {
  await delStudent({ id: row.id });
  init();
};
//获取 详情
const edit = (row: any) => {
  dialogVisible.value = true;
  Object.assign(form, row);
};
//关闭弹框
const close = () => {
  dialogVisible.value = false;
};
/****************** 查看成绩*************************** */
const lookScoreRow = (row: any) => {
  router.push({
    name: "score",
    params: { id: row.id },
  });
};
/****************** 添加用户详细信息*************************** */
//表单
const useInfoForm = reactive({
  name: "",
  no: "",
  id: "",
  stuInfo: {
    id: "",
    url: "",
    address: "",
  },
});
//清空用户详细信息数据
const resetUserInfoForm = reactive({ ...useInfoForm });
//dialog可见
const userInfodialogVisible = ref<boolean>(false);
const openUserInfoDialog = (row) => {
  userInfodialogVisible.value = true;
  Object.assign(useInfoForm, resetUserInfoForm);
};
//编辑用户详细信息
const editDetail = (row: any) => {
  userInfodialogVisible.value = true;
  if (!row.stuInfo) {
    row.stuInfo = {
      address: "",
      url: "",
    };
  }
  Object.assign(useInfoForm, row);
};
//
const closeUserInfo = () => {
  userInfodialogVisible.value = false;
};
const saveUserInfo = async () => {
  if (useInfoForm?.stuInfo?.id) {
    await updateStuInfo(useInfoForm.stuInfo);
  } else {
    await addStuInfo(useInfoForm);
  }
  closeUserInfo();
  init();
};
</script>

<style lang="scss">
html,
body {
  background: #ccc;
}

.wraps {
  height: 100vh;
  padding: 30px;
}
</style>
